import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"


const ItemNode = () => {
  return <div className="w-full h-[30px] flex justify-between items-center">
    <div className={`w-[80px] mr-[4px] text-[16px] font-bold ${textColorClass.text_default}`}>澳大利亚</div>
    <div className="w-[240px] h-[12px] border border-[rgba(48,154,250,0.20)] mr-[15px] bg-[rgba(48,154,250,0.10)]">
      <div className="w-[100px] h-full border border-[#18D8FF] bg-[rgba(24,216,255,0.40)]"></div>
    </div>
    <div className={`text-[rgba(24,144,255,1)] text-[14px] font-bold`}>14872</div>
  </div>
}

const AttackSource = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[330px] flex flex-col items-center justify-between"
    header={
      <TitleMain title="攻击来源" />
    }
  >

    <ItemNode />
    <ItemNode />
    <ItemNode />
    <ItemNode />
    <ItemNode />
    <ItemNode />
    <ItemNode />
    <ItemNode />


  </ItemMoudle>
}

export default AttackSource